<template>
  <template v-if="item.meta && !item.meta.hidden">
    <el-sub-menu
      :index="item.path"
      :key="item.path"
      v-if="item?.children?.length > 0"
    >
      <template #title>
        <el-icon>
          <!-- <Aim /> -->
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <MenuItem
        v-for="child in item.children"
        :item="child"
        :key="child.path"
      ></MenuItem>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <!-- <Aim /> -->
      </el-icon>
      <template #title>{{ item.meta.title }}</template>
    </el-menu-item>
  </template>
</template>
<script setup name="MenuItem">
import { Aim } from "@element-plus/icons-vue";
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss" scoped>
.el-menu-item.is-active {
  // color: #fff;
}
</style>
